<!-- 耗材管理-基础资料-耗材分类 -->
<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="采购日期">
              <el-date-picker
                v-model="alarmdate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据编号">
              <el-input v-model="listQuery.fbillno" placeholder="请输入名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据状态">
              <el-select v-model="listQuery.fbillstate" placeholder="请选择">
                <el-option
                  v-for="item in selectlist2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学校名称">
              <el-select v-model="listQuery.fsiteNo" placeholder="请选择">
                <el-option
                  v-for="item in selectlist1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="采购人员">
              <el-select v-model="listQuery.forduser" placeholder="请选择">
                <el-option
                  v-for="item in selectlist3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商">
              <el-select v-model="listQuery.fsupno" placeholder="请选择">
                <el-option
                  v-for="item in selectlist4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <el-button type="primary" icon="el-icon-search" @click="getlist">查询</el-button>
              <el-button type="success" icon="el-icon-plus" @click="insert(undefined)">新增</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <JNPF-table :data="list" border v-loading="loading">
          <el-table-column align="center" label="单据编号" prop="fbillno" width="150" />
          <el-table-column
            width="100"
            align="center"
            label="采购日期"
            prop="forddate"
          />
          <el-table-column align="center" label="供应商" prop="fsupno" width="150" />
          <el-table-column  align="center" label="采购人员" prop="forduser" width="150" />
          <el-table-column
            width="100"
            align="center"
            label="预计到货日"
            prop="fplanrecdate"
          />
          <el-table-column align="center" label="品项数" prop="fitemcount" />
          <el-table-column align="center" label="总件数" prop="fpiececount" />
          <el-table-column align="center" label="总价" prop="ftotalamt" />
          <el-table-column align="center" label="备注" prop="fexplanation" />
          <el-table-column align="center" label="单据状态" prop="fbillstate" >
          </el-table-column>
          <el-table-column fixed="left" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click.native.prevent="insert(scope.row)" icon="el-icon-edit" type="text" size="small">
                编辑
              </el-button>
              <el-popconfirm title="确定删除当前数据吗？" @confirm="HandelDel(scope.row.fpointNo)">
                <el-button slot="reference" icon="el-icon-delete" style="color: red;margin-left: 10px;"
                  type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
        <Form ref="Form" :gyuser="selectlist4" :cguser="selectlist3"/>
      </div>
    </div>
  </div>
</template>

<script>
  import Form from "./Form.vue"
  import {listordHead,getListArea} from "@/api/purchase/ordHead"
  export default {
    name: 'shop',
    components: { Form },
    data() {
      return {
        total: 0,
        list: [],
        selectlist1:[],
        selectlist2:[
          {
            "label": "待提交",
            "value": "1"
          },
          {
            "label": "已提交",
            "value": "2"
          },
          {
            "label": "已作废",
            "value": "8"
          }
        ],
        selectlist3:[],
        selectlist4:[],
        loading: false,
        alarmdate:[new Date(),new Date()],
        listQuery: {
          page: 1,
          limit: 20,
          sort: "desc",
          sidx: "",
          fsiteNo:"300017",
          forduser: undefined,
          forddate: undefined,
          ftakedateStart: "20250301",
          ftakedateEnd: "20250314",
          fplanrecdate: undefined,
          fsupno: undefined,
          fitemcount: undefined,
          fpiececount: undefined,
          ftotalamt: undefined,
          fsrcbillno: undefined,
          fexplanation: undefined,
          fupddate: undefined,
          foperator: undefined,
          fcheckdate: undefined,
          fcheckuser: undefined,
          fbillstate: undefined,
          sort: 'create_time',
          order: 'desc'
        },
      };
    },
    computed: {},
    created() {
      getListArea({ flag: 6, arg1: "300017" })
        .then(response => {
          this.selectlist4 = response.data.list
        })
        getListArea({ flag: 13, arg1: "300017" })
        .then(response => {
          this.selectlist3 = response.data.list
        })
      this.getlist();
    },
    methods: {
      //
      getlist(){
        this.listQuery.ftakedateStart = this.alarmdate == null ? null : this.formatDate(this.alarmdate[0])
        this.listQuery.ftakedateEnd = this.alarmdate == null ? null : this.formatDate(this.alarmdate[1])
        listordHead(this.listQuery)
        .then(res=>{
          this.list=res.data.list
        })
      },
      formatDate(date) {
      if (typeof (date) === 'object') {
        var ym
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        ym = '' + y + m + d
        return ym
      } else {
        return date
      }
    },
      //
      geTRoom(){
        getroom().then(res=>{
          this.selectlist1=res.data.list;
        })

        
      },
      HandelDel(id){
        deleteRoom(id)
        .then(res=>{
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getlist();
        })
      },
      //
      insert(row) {
        this.$refs.Form.init(row);
      },
    },
  };
</script>